<template>
  <div class="container">
    <div class="is-size-4 mb-5 has-text-weight-bold">
      <span class="primary-color">[</span> 正在进行<span class="primary-color">
        ]</span>
    </div>
    <el-table border stripe :data="examListDataProcessing">
      <el-table-column prop="id" label="编号" width="60" />
      <el-table-column prop="title" label="名称" />
      <el-table-column
        prop="early_start_time"
        :formatter="dateFormat"
        label="最早开始时间"
        width="150"
      />
      <el-table-column
        prop="late_start_time"
        :formatter="dateFormat"
        label="最晚开始时间"
        width="150"
      />
      <el-table-column
        prop="end_time"
        :formatter="dateFormat"
        label="结束时间"
        width="150"
      />
      <el-table-column width="100">
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="attendExam(scope.row)"
          >开始考试</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="is-size-4 mb-5 mt-6 has-text-weight-bold">
      <span class="primary-color">[</span> 即将开始<span class="primary-color">
        ]</span>
    </div>
    <el-table border stripe :data="examListDataNew">
      <el-table-column prop="id" label="编号" width="60" />
      <el-table-column prop="title" label="名称" />
      <el-table-column
        prop="early_start_time"
        :formatter="dateFormat"
        label="最早开始时间"
        width="150"
      />
      <el-table-column
        prop="late_start_time"
        :formatter="dateFormat"
        label="最晚开始时间"
        width="150"
      />
      <el-table-column
        prop="end_time"
        :formatter="dateFormat"
        label="结束时间"
        width="150"
      />
    </el-table>

    <!-- <el-divider/> -->

    <div class="is-size-4 mb-5 mt-6 has-text-weight-bold">
      <span class="primary-color">[</span> 已结束<span class="primary-color">
        ]</span>
    </div>

    <el-table border stripe :data="examListDataExpired">
      <el-table-column prop="id" label="编号" width="60" />
      <el-table-column prop="title" label="名称" />
      <el-table-column
        prop="early_start_time"
        :formatter="dateFormat"
        label="最早开始时间"
        width="150"
      />
      <el-table-column
        prop="late_start_time"
        :formatter="dateFormat"
        label="最晚开始时间"
        width="150"
      />
      <el-table-column
        prop="end_time"
        :formatter="dateFormat"
        label="结束时间"
        width="150"
      />
      <el-table-column width="100">
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="checkExamDetail(scope.row)"
          >查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 考试详情 -->
    <el-dialog fullscreen :visible.sync="detailDialogVisible">
      <!-- 试卷本体 -->
      <exam-paper
        mode="review"
        :exam-id="detail.examId"
        :exam-title="detail.examTitle"
        :subjcet="'得分：' + detail.userScore + ' / ' + detail.paperScore"
        :single-questions="detail.single"
        :multiple-questions="detail.multiple"
      />
    </el-dialog>
  </div>
</template>

<script>
import ExamPaper from '@/components/ExamPaper.vue'
// import exam from '@/store/modules/exam'
const dayjs = require('dayjs')
const examApi = require('@/api/exam')

export default {
  components: {
    ExamPaper
  },
  data() {
    return {
      detailDialogVisible: false,
      examListDataNew: [],
      examListDataProcessing: [],
      examListDataExpired: [],
      detail: {}
    }
  },
  mounted() {
    this.fetchExamList()
  },

  methods: {
    dateFormat(row, column, cellValue, index) {
      if (cellValue) {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
      } else {
        return '-'
      }
    },

    fetchExamList() {
      this.$loading()
      examApi
        .getExamList()
        .then(res => {
          console.log(res)
          const nowMills = dayjs().valueOf()
          // 判断时间是否晚于现在 用时间戳
          res.data.exams.forEach(element => {
            if (nowMills > element.end_time) {
              this.examListDataExpired.push(element)
            } else if (nowMills < element.early_start_time) {
              this.examListDataNew.push(element)
            } else {
              this.examListDataProcessing.push(element)
            }
          })
          this.$loading().close()
        })
        .catch(() => {
          this.$loading().close()
        })
    },

    attendExam(row) {
      const now = dayjs()
      // 判断时间是否晚于现在 用时间戳
      if (now.valueOf() < row.early_start_time) {
        this.$message('还没到考试时间！')
        return
      }

      if (now.valueOf() > row.late_start_time) {
        this.$message('您已迟到，不允许进入考试！')
        return
      }

      console.log(row)
      this.$router.push({
        name: 'exam',
        params: {
          examId: row.id,
          examTitle: row.title,
          subject: row.subject,
          endTime: row.end_time
        }
      })
    },

    checkExamDetail(row) {
      examApi
        .getExamPaperQuestionAnswer(row.id)
        .then(res => {
          console.log(res)
          this.detail = {
            single: res.data.single,
            multiple: res.data.multiple,
            examId: row.id,
            examTitle: row.title,
            userScore: res.data.userScore,
            paperScore: res.data.paperScore
          }
          setTimeout(() => {
            this.recoverAnswer(res.data.single)
            this.recoverAnswer(res.data.multiple)
          }, 500)
          this.detailDialogVisible = true
        })
        .catch(() => {})
    },

    recoverAnswer(data) {
      console.log('recover Answer.....', data)
      data.forEach(element => {
        this.$nextTick(() => {
          // console.log(`question${element.id}`);
          const q = this.$refs[`question${element.id}`]
          // const q = document.getElementById(`question${element.id}`)
          // console.log(q);
          if (q) q[0].setAnswer(element.choiceAnswer)
        })
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 100px;
}

.btn {
  font-size: 17px;
  margin-bottom: 15px;
  width: 100%;
  height: 65px;
  text-align: left;
}
</style>
